<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-button type="primary" @click="addList">新增</el-button>
      </el-col>
      <el-col :span="12">
        <el-input placeholder="请输入内容" v-model="input" @change="searchFun" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="searchFun"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <div>
      <el-table
        ref="multipleTable"
        :data="proList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        height="500"
        @sort-change="sortFun"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="55">
          <!-- <template slot-scope="scope">
            <span>{{scope.$index+1}}</span>
          </template>-->
        </el-table-column>
        <el-table-column type="title" prop="title" label="名称"></el-table-column>
        <el-table-column type="type" prop="type" label="商品类别" width="100"></el-table-column>
        <el-table-column type="classify" prop="classify" label="分类" width="100"></el-table-column>
        <el-table-column type="vertion" prop="vertion" label="版本"></el-table-column>
        <el-table-column type="price" prop="price" sortable label="价格" width="100"></el-table-column>
        <!-- <el-table-column type="imgs" prop="imgs" label="图片"></el-table-column> -->
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
            <el-button type="text" size="small" @click="showMsg(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 5px;">
        <el-pagination
          background
          :current-page="pages.currentPage"
          :page-size="pages.pageSize"
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
      <div>
        <el-drawer
          :title="title"
          :visible.sync="dialog"
          custom-class="demo-drawer"
          ref="drawer"
          size="50%"
        >
          <div class="demo-drawer__content" style="padding: 20px;">
            <el-form :model="form">
              <el-form-item label="标题">
                <el-input style="width:350px" v-model="form.title" :disabled="disabled"></el-input>
              </el-form-item>
              <el-form-item label="类别" prop="cid">
                <el-select v-model="form.cid" placeholder="请选择类别" :disabled="disabled">
                  <el-option v-for="(v,i) in typeArr" :key="i" :value="v.id" :label="v.type"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="分类" prop="sid">
                <el-checkbox v-model="checked" :disabled="disabled">必选精品</el-checkbox>
                <br />
                <el-select
                  v-show="checked"
                  v-model="form.sid"
                  placeholder="请选择分类"
                  :disabled="disabled"
                  style="margin-left:40px"
                >
                  <el-option v-for="(v,i) in sumArr" :key="i" :value="v.id" :label="v.title"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="版本">
                <el-input style="width:350px" v-model="form.vertion" :disabled="disabled"></el-input>
              </el-form-item>
              <el-form-item label="价格">
                <el-input style="width:350px" v-model="form.price" :disabled="disabled"></el-input>
              </el-form-item>
              <el-form-item label="图片上传">
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:2468/upload/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :disabled="disabled"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
              <el-button @click="cancelForm">取 消</el-button>
              <el-button type="primary" @click="saveFun" :disabled="disabled">确 定</el-button>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      form: {},
      imageUrl: "",
      input: "",
      dialog: false,
      typeArr: [],
      sumArr: [],
      title: "",
      disabled: false,
      checked: false
    };
  },
  async mounted() {
    this.typeArr = await this.getClassList(1);
    this.sumArr = await this.getClassList(0);
    await this.getList();
    // console.log(this.proList)
  },
  computed: {
    ...mapState("product", ["proList", "pages", "total"])
  },
  methods: {
    ...mapActions("classify", ["getClassList"]),
    ...mapActions("product", ["getList", "saveList", "deleteList"]),
    ...mapMutations("product", ["SET_KEYWORD", "SET_CURRENTPAGE", "SET_ORDER"]),
    //图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.imgs = res.data;
    },
    //搜索
    searchFun() {
      this.SET_KEYWORD(this.input);
      this.SET_CURRENTPAGE(1);
      this.getList();
    },
    //复选
    handleSelectionChange(val) {
      let ids = val.map(val => val.id);
    },
    //排序
    sortFun(obj) {
      this.SET_ORDER(obj);
      this.getList();
    },
    //当前页
    handleCurrentChange(val) {
      // console.log(val)
      this.SET_CURRENTPAGE(val);
      this.getList();
    },
    //查看
    showMsg(row) {
      this.form = { ...row };
      this.title = "查看商品";
      this.dialog = true;
      this.imageUrl = "http://localhost:2468/uploads/" + row.imgs;
      this.disabled = true;
    },
    //新增
    addList() {
      this.dialog = true;
      this.title = "新增商品";
    },
    //修改
    handleEdit(row) {
      this.form = { ...row };
      this.title = "修改商品";
      this.dialog = true;
      this.imageUrl = "http://localhost:2468/uploads/" + row.imgs;
    },
    //确定按钮
    async saveFun() {
      await this.saveList(this.form);
      this.cancelForm();
    },
    //取消按钮
    cancelForm() {
      this.dialog = false;
      this.form = {};
      this.imageUrl = "";
      this.disabled = false;
    },
    //删除
    handleDelete(id) {
      this.$confirm("此操作将永久删除该项信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteList({ id }).then(res => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style scoped>
.avatar-uploader >>> .el-upload {
  border: 1px dashed #cccccc;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
